<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="__PUBLIC__/wap/assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="__PUBLIC__/wap/assets/agile/css/flat/flat.component.css">
		<link rel="stylesheet" href="__PUBLIC__/wap/assets/agile/css/flat/flat.color.css">
		<link rel="stylesheet" href="__PUBLIC__/wap/assets/agile/css/flat/iconline.css">
		<link rel="stylesheet" href="__PUBLIC__/wap/assets/agile/css/flat/iconlogo.css">
		<link rel="stylesheet" href="__PUBLIC__/wap/assets/app/css/app.css">

		<link rel="stylesheet" href="__PUBLIC__/wap/assets/agile/css/flat/iconform.css">
		<link rel="stylesheet" href="__PUBLIC__/wap/assets/component/timepicker/timepicker.css">
		<style>
			a{
				color: #000000;
			}
		</style>
	</head>
	<body>
		<div id="section_container">
			<section id="list_section" data-role="section" class="active">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>wo</h1>
				    </div>
				</header>
				<article data-role="article" id="main_article" data-scroll="verticle" class="active" style="top:44px;bottom:0px;">
				<!--<article data-role="article" id="normal_article"  data-scroll="verticle" class="active" style="top:88px;bottom:0px;">
				-->
				<div class="scroller"> 

					    <ul class="listitem">
					    		<li class="sliver" style="padding: 5px;"></li>
					        <li>
					            <img src="__PUBLIC__/wap/assets/app/img/logo-exmobi.png" style="width:64px; border-radius:64px" class="rimg"/>
					        		<div class="text" style="margin-top: 26.5px;">
					              	 头像
					            </div>
					        </li>
					         <li>
					         	 <a data-toggle="section" href="#section_name">
					         	 		<i class="ricon iconfont iconline-arrow-right"></i>
					             		<font class="right" style="margin-right: 10px;">冰冰</font>
					             		<div class="text nowrap">姓名</div>
					              </a>
					        </li>
					        <li>
						        <a data-toggle="section" href="#section_username">
						            		<i class="ricon iconfont iconline-arrow-right"></i>
						            		<font class="right" style="margin-right: 10px;">冰冰</font>
						            		<div class="text nowrap">昵称</div>
						        </a>
					        </li>
					        
					    </ul>
					    
					    <ul class="listitem">
					   	 	<li class="sliver" style="padding: 5px;"></li>
					        <li>
					            <i class="ricon iconfont iconline-arrow-right"></i>
					            <font class="right" style="margin-right: 10px;">男</font>
					            <div class="text nowrap">性别</div>
					        </li>
					        <li>
					        		<a data-toggle="section" href="#section_area">
							            <i class="ricon iconfont iconline-arrow-right"></i>
							            <font class="right" style="margin-right: 10px;">上海 闵行</font>
							            <div class="text nowrap">地区</div>
							     </a>
					        </li>
					        <li>
					        		
							    <div data-role="date" class="label-right">
							  		<label>出生日期</label>
							  		<font class="right" style="margin-right: 10px; margin-top: -16px;">  </font>
							  		<input type="hidden"/>
							  	</div>
					        </li>
					    </ul>
					    
					    <ul class="listitem">
					   	 	<li class="sliver" style="padding: 5px;"></li>
					        <li>
					        		<a data-toggle="section" href="#section_phone">
					            		<i class="ricon iconfont iconline-arrow-right"></i>
					            		<font class="right" style="margin-right: 10px;">188****1234</font>
					            		<div class="text nowrap">绑定手机</div>
					            	</a>
					        </li>
					        <li>
					        		<a data-toggle="section" href="#section_address">
					            		<i class="ricon iconfont iconline-arrow-right"></i>
					            		<font class="right" style="margin-right: 10px;">上海 闵行</font>
					            		<div class="text nowrap">取件地址</div>
					            </a>
					        </li>
					    </ul>
					    
					</div>  
				</article>
			</section>
			
			<!--姓名-->
			<section id="section_name" data-role="section">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>姓名</h1>
				    </div>
				</header>
				<article data-role="article" class="active" data-scroll="verticle" style="top:44px;bottom:0px; background-color: #f6f6f6;">
					<div class="scroller">
						<form  class="form-common">
							<label class="label-left" for="user"></label>
							<label class="label-right" style="margin-bottom: 10px;">
						   	 	<input id="user" type="text" placeholder="请输入英文数字下滑线" pattern="^[a-zA-z][a-zA-Z0-9_]{2,9}$" title="英文数字下滑线" required="">
						    	</label>
						    	<button class="block">按钮</button>
						</form>
					</div>
				</article>
			</section>
			<!--姓名end-->
			<!--昵称-->
			<section id="section_username" data-role="section">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>昵称</h1>
				    </div>
				</header>
				<article data-role="article" class="active" data-scroll="verticle" style="top:44px;bottom:0px; background-color: #f6f6f6;">
					<div class="scroller">
						<form  class="form-common">
							<label class="label-left" for="user"></label>
							<label class="label-right" style="margin-bottom: 10px;">
						   	 	<input id="user" type="text" placeholder="请输入英文数字下滑线" pattern="^[a-zA-z][a-zA-Z0-9_]{2,9}$" title="英文数字下滑线" required="">
						    	</label>
						    	<button class="block">按钮</button>
						</form>
					</div>
				</article>
			</section>
			<!--昵称end-->
			
			<!--取送地址-->
			<section id="section_address" data-role="section">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>取送地址</h1>
				    </div>
				</header>
				<article data-role="article" class="active" data-scroll="verticle" style="top:44px;bottom:0px; background-color: #f6f6f6;">
					<div class="scroller">
						<form  class="form-common">
							<label class="label-left" for="user">取件地址</label>
							<label class="label-right" style="margin-bottom: 10px;">
						   	 	<input id="user" type="text" required="">
						    	</label>
						    	<button class="block">按钮</button>
						</form>
					</div>
				</article>
			</section>
			<!--取送地址end-->
			<!--绑定手机-->
			<section id="section_phone" data-role="section">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>绑定手机</h1>
				    </div>
				</header>
				<article data-role="article" class="active" data-scroll="verticle" style="top:44px;bottom:0px; background-color: #f6f6f6;">
					<div class="scroller">
						<form  class="form-common">
							<label class="label-left" for="user">已绑定手机</label>
							<label class="label-right" >
						   	 	<input id="user" type="text" placeholder="请输入英文数字下滑线" pattern="^[a-zA-z][a-zA-Z0-9_]{2,9}$" title="英文数字下滑线" required="">
						    	</label>
						    	<hr>
						    	<label class="label-left" for="user">更换绑定手机</label>
							<label class="label-right" >
						   	 	<input id="user" type="text" placeholder="请输入英文数字下滑线" pattern="^[a-zA-z][a-zA-Z0-9_]{2,9}$" title="英文数字下滑线" required="">
						    	</label>
						    	<hr>
						    	<label class="label-left" for="user">验证短信</label>
							<label class="label-right" style="margin-bottom: 10px;">
						   	 	<input id="user" type="text" placeholder="请输入英文数字下滑线" pattern="^[a-zA-z][a-zA-Z0-9_]{2,9}$" title="英文数字下滑线" required="">
						    	</label>
						    	
						    		
						    	<button class="block">按钮</button>
						</form>
					</div>
				</article>
			</section>
			<!--绑定手机end-->
			
			<!--城市选择-->
			<section id="section_area" data-role="section">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>取送地址</h1>
				    </div>
				</header>
				<article data-role="article" class="active" data-scroll="verticle" style="top:44px;bottom:0px; background-color: #f6f6f6;">
					<div class="scroller">
						<ul class="listitem">
							<li class="sliver">定位到的位置</li>
					        <li>
					        		<i class="icon iconfont iconline-map-location"></i>
					            <i class="ricon iconfont iconline-arrow-right"></i>
					            <div class="text nowrap">上海 闵行</div>
					        </li>
					    </ul>
					    
					    <ul class="listitem">
					    	<li class="sliver">全部</li>
					        <li>
					            <i class="ricon iconfont iconline-arrow-right"></i>
					            <div class="text nowrap">上海市</div>
					        </li>
					        <li>
					            <i class="ricon iconfont iconline-arrow-right"></i>
					            <div class="text nowrap">北京市</div>
					        </li>
					        <li>
					            <i class="ricon iconfont iconline-arrow-right"></i>
					            <div class="text nowrap">天津市</div>
					        </li>
					    </ul>
					</div>
				</article>
			</section>
			<!--城市选择end-->
		</div>
		
		<!--- third --->
		<script src="__PUBLIC__/wap/assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="__PUBLIC__/wap/assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="__PUBLIC__/wap/assets/third/iscroll/iscroll-probe.js"></script>
		<script src="__PUBLIC__/wap/assets/third/arttemplate/template-native.js"></script>
		<!-- agile -->
		<script type="text/javascript" src="__PUBLIC__/wap/assets/agile/js/agile.js"></script>		
		<!--- bridge --->
		<script type="text/javascript" src="__PUBLIC__/wap/assets/bridge/exmobi.js"></script>
		<script type="text/javascript" src="__PUBLIC__/wap/assets/bridge/agile.exmobi.js"></script>
		<!-- app -->
		<script src="__PUBLIC__/wap/assets/component/timepicker/agile.timepicker.js"></script>
		<script type="text/javascript" src="__PUBLIC__/wap/assets/component/extend.js"></script>
		<script type="text/javascript" src="__PUBLIC__/wap/assets/app/js/app.js"></script>
		
	</body>
</html>